<template>
    <div>
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt=""/>
            </div>
            <crumbs basetitle="财务" title="发票管理"></crumbs>
        </div>
        <div class="tabcontentbox">
            <div class="innertabbox">
                <div :class="{ innertabitem: true, innertabactive: innertabflag === 1 }" @click="changeinnertab1(1)">未上传
                </div>
                <div :class="{ innertabitem: true, innertabactive: innertabflag === 0 }" @click="changeinnertab1(0)">已上传
                </div>
            </div>
            <div v-show="innertabflag == 0">
                <div class="formbox">
                    <div class="top">
                        <div class="toptext">筛选</div>
                        <div class="flexcenterbox">
                            <div class="clear" @click="clearok">
                                <img src="../../assets/image/容器.png" alt="">
                                <span>清除</span>
                            </div>
                            <div class="clear" @click="Batchundoexceptionfn">
                                <img v-show="isBatchundoexceptionflag === false"
                                     src="../../assets/image/b2b0974cb101d77867f09530af6189e.png" alt="">
                                <img v-show="isBatchundoexceptionflag === true"
                                     src="../../assets/image/8a184cb90cb29966e06e51199d763c8.png" alt="">
                                <span v-show="isBatchundoexceptionflag === false">批量撤销异常</span>
                                <span v-show="isBatchundoexceptionflag === true" class="blue">批量撤销异常</span>
                            </div>
                            <div class="clear" @click="dayuploadfptc = true">
                                <img src="../../assets/image/容器(4).png" alt="">
                                <span>导入开票公司</span>
                            </div>
                            <div class="clear" @click="invoiceexportallfnok">
                                <img src="../../assets/image/Share.png" alt="">
                                <span>导出</span>
                            </div>
                            <div class="clear" @click="changeopenorcloseflag">
                                <img v-show="openorcloseflag === false" src="../../assets/image/组1849.png" alt="">
                                <img v-show="openorcloseflag === true" style="transform: rotate(180deg);"
                                     src="../../assets/image/组1849.png" alt="">
                                <span>{{ openorcloseflag === false ? '收起' : '展开' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="formcontent">
                        <div class="formitem">
                            <div class="lable">所属业务员：</div>
                            <el-select clearable @change="getokallinvoicelist"
                                       style="margin-right: 16px;width: 200px;" v-model="oksalesname"
                                       placeholder="请选择销售">
                                <el-option v-for="item in allseller" :key="item.saleName" :label="item.saleName"
                                           :value="item.saleId"/>
                            </el-select>
                            <div class="lable">收款账户：</div>
                            <el-select clearable @change="getokallinvoicelist"
                                       style="margin-right: 16px;width: 250px;" v-model="okreceiptIds" multiple
                                       collapse-tags
                                       collapse-tags-tooltip placeholder="请选择收款账户（可多选）">
                                <el-option v-for="item in alladdmin" :key="item.value" :label="item.bankName"
                                           :value="item.id"/>
                            </el-select>
                            <div class="lable">发票月份：</div>
                            <el-date-picker clearable @change="getokallinvoicelist"
                                            style="margin-right: 16px;width: 200px;" v-model="okmonth" type="month"
                                            value-format="YYYY-MM" placeholder="请选择发票月份"/>
                            <div class="lable">申请月份：</div>
                            <el-date-picker clearable @change="getokallinvoicelist"
                                            style="margin-right: 16px;width: 200px;" v-model="okapplicationMonth"
                                            type="month"
                                            value-format="YYYY-MM" placeholder="请选择申请月份"/>
                        </div>
                        <div class="formitem" v-show="openorcloseflag === false">
                            <div class="lable">申请公司名：</div>
                            <el-select clearable style="margin-right: 16px;width:200px" v-model="okcompanyName"
                                       filterable remote reserve-keyword @change="getokallinvoicelist"
                                       placeholder="请输入公司名称"
                                       :remote-method="remoteMethod" :loading="loading">
                                <el-option v-for="item in companylist" :key="item.companyName" :label="item.companyName"
                                           :value="item.companyName"/>
                            </el-select>
                            <div class="lable">发票类型：</div>
                            <el-select clearable @change="getokallinvoicelist"
                                       style="margin-right: 16px;width: 250px;" v-model="oktype" class="m-2"
                                       placeholder="请选择发票类型">
                                <el-option label="日日保" value="0"/>
                                <el-option label="长期保" value="3"/>
                                <el-option label="电子签" value="2"/>
                                <el-option label="发薪专户" value="4"/>
                            </el-select>
                            <div class="lable">开票月份：</div>
                            <el-date-picker clearable @change="getokallinvoicelist"
                                            style="margin-right: 16px;width: 200px;" v-model="okopenDay" type="month"
                                            value-format="YYYY-MM" placeholder="请选择开票月份"/>
                            <div class="lable">核对状态：</div>
                            <el-select clearable @change="getokallinvoicelist"
                                       style="margin-right: 16px;width: 200px;" v-model="okcheckStatus" class="m-2"
                                       placeholder="请选择核对状态">
                                <el-option label="正常" value="0"/>
                                <el-option label="异常" value="1"/>
                                <el-option label="待核对" value="2"/>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="accounttable">
                    <div class="tableborder">
                        <el-table :data="oktabledate" style="width: 100%" @selection-change="handleSelectionChange"
                                  :header-cell-style="{
                                background: '#FAFAFC',
                                color: '#202536',
                            }">
                            <el-table-column type="selection" width="55"/>
                            <el-table-column prop="companyName" label="申请公司名"/>
                            <el-table-column prop="month" label="发票月份"/>
                            <el-table-column prop="type" width="100" label="发票类型">
                                <template #default="scope">
                                    <div v-show="scope.row.type === 0">国寿财</div>
                                    <div v-show="scope.row.type === 4">发薪专户</div>
                                    <div v-show="scope.row.type === 2">电子签</div>
                                    <div v-show="scope.row.type === 3">长期保</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="applyTime" label="申请时间"/>
                            <el-table-column prop="amount" label="发票金额">
                                <template #default="scope">
                                    <div>
                                        <span class="orign">￥{{ scope.row.amount }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="salesName" label="所属业务员"/>
                            <el-table-column prop="bankName" label="收款账户"/>
                            <el-table-column prop="rechargeAmount" label="充值金额">
                                <template #default="scope">
                                    <div>
                                        <span class="orign">￥{{ scope.row.rechargeAmount }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="uploadTime" label="上传日期">
                                <template #default="scope">
                                    {{
                                        scope.row.uploadTime === null || scope.row.uploadTime === '' ? '--' :
                                            scope.row.uploadTime
                                    }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="checkStatus" label="核对状态">
                                <template #default="scope">
                                    <div v-show="scope.row.checkStatus === 0">正常</div>
                                    <el-tooltip class="box-item" effect="dark" content="异常原因：发票金额不符"
                                                placement="bottom">
                                        <div v-show="scope.row.checkStatus === 1" class="orign pointer">异常</div>
                                    </el-tooltip>
                                    <div v-show="scope.row.checkStatus === 2">待核对</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="开票日期">
                                <template #default="scope">
                                    <div v-if="scope.row.checkStatus === 0">
                                        {{ scope.row.updateTime }}
                                    </div>
                                    <div v-else>
                                        --
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="area" label="操作">
                                <template #default="scope">
                                    <el-button link type="primary" @click="lookfp(scope.row)">查看发票</el-button>
                                    <el-button link type="primary" @click="onRevocation(scope.row)">撤销</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="paginationborder">
                        <pagination :total="oktotal" :currentPage="okpagenum" :pageSize="okpagesize"
                                    @SizeChange="changeokpagesize" @CurrentChange="changeokpagenum"></pagination>
                    </div>
                </div>
            </div>
            <div v-show="innertabflag == 1">
                <div class="formbox">
                    <div class="top">
                        <div class="toptext">筛选</div>
                        <div class="flexcenterbox">
                            <div class="clear" @click="clearno">
                                <img src="../../assets/image/容器.png" alt="">
                                <span>清除</span>
                            </div>
                            <div class="clear" @click="invoiceexportallfnno">
                                <img src="../../assets/image/Share.png" alt="">
                                <span>导出</span>
                            </div>
                            <div class="clear" @click="changeopenorcloseflag2">
                                <img v-show="openorcloseflag2 === false" src="../../assets/image/组1849.png" alt="">
                                <img v-show="openorcloseflag2 === true" style="transform: rotate(180deg);"
                                     src="../../assets/image/组1849.png" alt="">
                                <span>{{ openorcloseflag2 === false ? '收起' : '展开' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="formcontent">
                        <div class="formitem">
                            <div class="lable">所属业务员：</div>
                            <el-select clearable @change="getnoallinvoicelist"
                                       style="margin-right: 16px;width:200px" v-model="nosalesname"
                                       placeholder="请选择销售">
                                <el-option v-for="item in allseller" :key="item.saleName" :label="item.saleName"
                                           :value="item.saleId"/>
                            </el-select>
                            <div class="lable">收款账户：</div>
                            <el-select clearable @change="getnoallinvoicelist"
                                       style="margin-right: 16px;width:250px" v-model="noreceiptIds" multiple
                                       collapse-tags
                                       collapse-tags-tooltip placeholder="请选择收款账户（可多选）">
                                <el-option v-for="item in alladdmin" :key="item.value" :label="item.bankName"
                                           :value="item.id"/>
                            </el-select>
                            <div class="lable">发票月份：</div>
                            <el-date-picker clearable @change="getnoallinvoicelist"
                                            style="margin-right: 16px;width:200px" v-model="nomonth" type="month"
                                            value-format="YYYY-MM" placeholder="请选择发票月份"/>
                            <div class="lable">申请月份：</div>
                            <el-date-picker clearable @change="getnoallinvoicelist"
                                            style="margin-right: 16px;width:200px" v-model="noapplicationMonth"
                                            type="month"
                                            value-format="YYYY-MM" placeholder="请选择申请月份"/>
                        </div>
                        <div class="formitem" v-show="openorcloseflag2 === false">
                            <div class="lable">申请公司名：</div>
                            <el-select clearable style="margin-right: 16px;width:200px" v-model="nocompanyName"
                                       filterable remote reserve-keyword @change="getnoallinvoicelist"
                                       placeholder="请输入公司名称"
                                       :remote-method="remoteMethod" :loading="loading">
                                <el-option v-for="item in companylist" :key="item.companyName" :label="item.companyName"
                                           :value="item.companyName"/>
                            </el-select>
                            <div class="lable">发票类型：</div>
                            <el-select clearable @change="getnoallinvoicelist"
                                       style="margin-right: 16px;width:250px" v-model="notype" class="m-2"
                                       placeholder="请选择发票类型">
                                <el-option label="日日保" value="0"/>
                                <el-option label="长期保" value="3"/>
                                <el-option label="电子签" value="2"/>
                                <el-option label="发薪专户" value="4"/>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="accounttable">
                    <div class="tableborder">
                        <el-table :data="notabledate" style="width: 100%" :header-cell-style="{
                            background: '#FAFAFC',
                            color: '#202536',
                        }">
                            <el-table-column prop="companyName" label="申请公司名"/>
                            <el-table-column prop="month" label="发票月份"/>
                            <el-table-column prop="type" width="100" label="发票类型">
                                <template #default="scope">
                                    <div v-show="scope.row.type === 0">国寿财</div>
                                    <div v-show="scope.row.type === 4">发薪专户</div>
                                    <div v-show="scope.row.type === 2">电子签</div>
                                    <div v-show="scope.row.type === 3">长期保</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="applyTime" label="申请时间"/>
                            <el-table-column prop="amount" label="发票金额" width="150">
                                <template #default="scope">
                                    <div>
                                        <span class="orign">￥{{ scope.row.amount }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="salesName" label="所属业务员"/>
                            <el-table-column prop="bankName" label="收款账户"/>
                            <el-table-column prop="amount" label="充值金额" width="150">
                                <template #default="scope">
                                    <div>
                                        <span class="orign">￥{{ scope.row.rechargeAmount }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="paginationborder">
                        <pagination :total="nototal" :currentPage="nopagenum" :pageSize="nopagesize"
                                    @SizeChange="changenopagesize" @CurrentChange="changenopagenum"></pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- 导入开票公司弹窗 -->
        <el-dialog v-model="dayuploadfptc" title="导入开票公司" width="600">
            <!-- <el-upload ref="dayuploadfp" class="upload-demo" accept=".xlsx" :auto-upload="false" drag
                :before-upload="daybeforeUploadfp" :file-list="dayfileList" :on-error="error" :on-success="success"
                :on-change="dayonChange" :headers="{ Authorization: 'BackstageBearer ' + token }"
                :before-remove="daybeforeRemove" :action="baseurl + '/saas/invoice/import-open-company'" :limit="1"
                :multiple="false">
                <img src="../../assets/image/uploadvideo.png" alt="">
                <div class="el-upload__text">
                    将文件拖到此处，或<span class="blue">点击上传</span>
                </div>
            </el-upload> -->
            <div class="mg-b-20">
                <el-date-picker v-model="uploadDate" type="month" :clearable="false" placeholder="请选择"
                                value-format="YYYY-MM"/>
            </div>
            <el-upload ref="dayuploadfp" class="upload-demo" accept=".xlsx" :auto-upload="false" drag
                       :before-upload="daybeforeUploadfp" :file-list="dayfileList" :on-change="dayonChange"
                       :before-remove="daybeforeRemove" action="#" :multiple="true">
                <img src="../../assets/image/uploadvideo.png" alt="">
                <div class="el-upload__text">
                    将文件拖到此处，或<span class="blue">点击上传</span>
                </div>
            </el-upload>
            <div class="flexendbox">
                <el-button class="my_cancelbtn" @click="dayuploadfpcancel">取消</el-button>
                <el-button class="my_btn" @click="dayuploadfpsure">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog v-model="ecporterrdialog" title="重复上传提示" width="1000">
            <div class="ecporterrdialoginnertit">发现重复发票号，请查看后重新上传</div>
            <div class="flex">
                <el-table
                    :data="erruploadlist.length === 0 ? [] : erruploadlist.slice(0, isdouble ? erruploadlist.length / 2 : (erruploadlist.length - 1) / 2 + 1)"
                    style="width: 50%;margin-right: 20px;" :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536',
                    }">
                    <el-table-column prop="companyName" label="公司名称"/>
                    <el-table-column prop="invoiceNo" label="发票号"/>
                </el-table>
                <el-table
                    :data="erruploadlist.length === 0 ? [] : erruploadlist.slice(isdouble ? erruploadlist.length / 2 : (erruploadlist.length - 1) / 2 + 1, erruploadlist.length)"
                    style="width: 50%" :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536',
                    }">
                    <el-table-column prop="companyName" label="公司名称"/>
                    <el-table-column prop="invoiceNo" label="发票号"/>
                </el-table>
            </div>
            <template #footer>
                <div class="flex-center">
                    <el-button class="my_cancelbtn" @click="ecporterrdialog = false">取消</el-button>
                    <el-button class="my_btn" @click="resub">重新上传</el-button>
                </div>
            </template>
        </el-dialog>
        <previewDialog v-model:show="showPreview" v-model:url="previewUrl"/>
    </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import {ref, onMounted, onActivated} from 'vue'
import crumbs from '../../components/crumbs.vue'
import {
    invoiceexportallapi,
    Batchundoexceptionapi,
    getcompanyapi,
    getalladminapi,
    getmarketapi,
    getallinvoicelistapi,
    exportopeninvoiceapi,
    revocationtopeninvoiceApi
} from '../../api/api'
import {ElMessage, ElMessageBox, ElTable, UploadFile, UploadFiles} from 'element-plus'
import baseurl from '../../api/env'
import previewDialog from '@/components/previewDialog/index.vue'

const allseller = ref<any>([])
const token = ref<any>('')
const ecporterrdialog = ref(false)
const resub = () => {
    dayuploadfp.value.clearFiles()
    ecporterrdialog.value = false
    dayuploadfptc.value = true
}
const uploadDate = ref(dayjs().subtract(1, 'month').format('YYYY-MM'))
const invoiceexportallfnok = () => {
    invoiceexportallapi({
        status: 2,
        salesName: oksalesname.value,
        receiptIds: okreceiptIds.value,
        applicationMonth: okapplicationMonth.value ? okapplicationMonth.value : '',
        companyName: okcompanyName.value,
        type: oktype.value,
        openDay: okopenDay.value === null ? '' : okopenDay.value,
        checkStatus: okcheckStatus.value,
    }).then((res: any) => {
        console.log(res)
        window.location.href = baseurl + '/common/download?delete=true&fileName=' + res
    })
}
const remoteMethod = (query: string) => {
    if (query) {
        loading.value = true
        getcompany(query)
    } else {
        companylist.value = []
    }
}
const loading = ref(false)
const invoiceexportallfnno = () => {
    invoiceexportallapi({
        status: 1,
        salesName: nosalesname.value,
        receiptIds: noreceiptIds.value,
        applicationMonth: noapplicationMonth.value ? noapplicationMonth.value : '',
        companyName: nocompanyName.value,
        type: notype.value,
        openDay: noopenDay.value === null ? '' : noopenDay.value,
        checkStatus: nocheckStatus.value,
    }).then((res: any) => {
        console.log(res)
        window.location.href = baseurl + '/common/download?delete=true&fileName=' + res
    })
}
onMounted(() => {
    // let y = new Date().getFullYear()
    // let m = new Date().getMonth()
    // okmonth.value = dayjs().subtract(1, 'month')
    // nomonth.value = dayjs().subtract(1, 'month')
    // token.value = sessionStorage.getItem('token')
    // getmarket()
    // getalladmin()
    // getokallinvoicelist()
    // getnoallinvoicelist()
})
onActivated(() => {
    // let y = new Date().getFullYear()
    // let m = new Date().getMonth()
    okmonth.value = dayjs().subtract(1, 'month')
    nomonth.value = dayjs().subtract(1, 'month')
    token.value = sessionStorage.getItem('token')
    getmarket()
    getalladmin()
    getokallinvoicelist()
    getnoallinvoicelist()
})
const dayfileList = ref([])
const dayuploadfptc = ref(false)
const dayonChange = (file: any, fileListVal: any) => {
    console.log(34567899, fileListVal)
    dayfileList.value = fileListVal
}
const daybeforeRemove = (file: any, fileListVal: any) => {
    console.log(fileListVal)
    dayfileList.value = fileListVal
}
const daybeforeUploadfp = (val: any) => {
    console.log(val)
}
const dayuploadfpcancel = () => {
    dayuploadfptc.value = false
    dayuploadfp.value.clearFiles()
}
const dayuploadfp = ref()
const dayuploadfpsure = async () => {
    if (dayfileList.value?.length) {
        const formData = new FormData()
        formData.append('month', uploadDate.value)
        console.log(1111, dayfileList.value)
        // formData.append('file', dayfileList.value[0].raw)
        dayfileList.value.forEach((i: any) => {
            console.log(111, i.raw)
            formData.append('files', i.raw)
        })
        exportopeninvoiceapi(formData).then((res: any) => {
            console.log(2222222, res)
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '上传成功'
                })
                dayuploadfp.value.clearFiles()
                setTimeout(() => {
                    getokallinvoicelist()
                }, 400)
                dayuploadfptc.value = false
            } else {
                erruploadlist.value = res
                if (erruploadlist.value.length % 2 === 1) {
                    isdouble.value = false
                } else if (erruploadlist.value.length % 2 === 0) {
                    isdouble.value = true
                }
                ecporterrdialog.value = true
                dayuploadfptc.value = false
            }
        })
    }
}
const isdouble = ref(false)
const erruploadlist = ref([])
const success = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    console.log('error1111', response)
}
const error = (err: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    console.log(err, 'err2222')
}
const isBatchundoexceptionflag = ref(false)
const handleSelectionChange = (val: any) => {
    if (val.length > 0) {
        isBatchundoexceptionflag.value = true
    } else {
        isBatchundoexceptionflag.value = false
    }
    console.log(val)
    multipleSelection.value = val
}
const multipleSelection = ref<any>([])
const openorcloseflag = ref(false)
const changeopenorcloseflag = () => {
    openorcloseflag.value = !openorcloseflag.value
}
const openorcloseflag2 = ref(false)
const changeopenorcloseflag2 = () => {
    openorcloseflag2.value = !openorcloseflag2.value
}

const showPreview = ref(false)
const previewUrl = ref('')
const lookfp = (val: any) => {
    console.log(11111, val)
    previewUrl.value = val.invoiceUrl
    showPreview.value = true
}
const onRevocation = (val: any) => {
    console.log(val, 'guiyvsdguiysdfguyuyh')
    ElMessageBox.confirm(
        '确定撤销吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await revocationtopeninvoiceApi({
                ids: [val.id]
            })
            await getokallinvoicelist()
            ElMessage({
                type: 'success',
                message: '撤销成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消撤销',
            })
        })
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const Batchundoexceptionfn = () => {
    if (multipleSelection.value.length === 0) {
        return
    }
    const arr: any = []
    multipleSelection.value.forEach((ele: any, i: number) => {
        arr.push(ele.id)
    })
    ElMessageBox.confirm(
        '点击确定后，该公司发票核对状态将变为正常状态，客户可下载发票?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            Batchundoexceptionapi({ids: arr}).then((res: any) => {
                console.log(res, '批量操作')
                if (res === true) {
                    getokallinvoicelist()
                    multipleTableRef.value!.clearSelection()
                    ElMessage({
                        type: 'success',
                        message: '操作成功'
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}
// 获取公司
const getcompany = async (val: any) => {
    const res: any = await getcompanyapi(val)
    console.log(res, '公司列表')
    companylist.value = res
    loading.value = false
}
const companylist = ref<any>([])
// 获取收款账户
const getalladmin = async () => {
    const res: any = await getalladminapi()
    console.log(res, '收款账户列表')
    alladdmin.value = res.list
}
const alladdmin = ref<any>([])
// 获取销售
const getmarket = async () => {
    const res: any = await getmarketapi()
    console.log(res, '销售列表')
    allseller.value = res
}
const innertabflag = ref(1)
const changeinnertab1 = (i: number) => {
    innertabflag.value = i
    if (i === 0) {
        console.log('已上传')
        getokallinvoicelist()
    } else if (i === 1) {
        console.log('未上传')
        getnoallinvoicelist()
    }
}
const getnoallinvoicelist = async () => {
    const res: any = await getallinvoicelistapi({
        pageNum: nopagenum.value,
        pageSize: nopagesize.value,
        status: 1,
        salesId: nosalesname.value ? nosalesname.value : '',
        receiptIds: noreceiptIds.value ? noreceiptIds.value.join(',') : '',
        applicationMonth: noapplicationMonth.value === null ? '' : noapplicationMonth.value,
        companyName: nocompanyName.value ? nocompanyName.value : '',
        type: notype.value ? notype.value : '',
        openDay: noopenDay.value === null ? '' : noopenDay.value,
        checkStatus: nocheckStatus.value ? nocheckStatus.value : '',
    })
    console.log(res, '未上传发票列表')
    notabledate.value = res.list
    nototal.value = res.totalCount
}
const getokallinvoicelist = async () => {
    const res: any = await getallinvoicelistapi({
        pageNum: okpagenum.value,
        pageSize: okpagesize.value,
        status: 2,
        salesId: oksalesname.value ? oksalesname.value : '',
        receiptIds: okreceiptIds.value ? okreceiptIds.value.join(',') : '',
        applicationMonth: okapplicationMonth.value === null ? '' : okapplicationMonth.value,
        companyName: okcompanyName.value ? okcompanyName.value : '',
        type: oktype.value ? oktype.value : '',
        openDay: okopenDay.value === null ? '' : okopenDay.value,
        checkStatus: okcheckStatus.value ? okcheckStatus.value : '',
    })
    console.log(res, '已上传发票列表')
    oktabledate.value = res.list
    oktotal.value = res.totalCount
}
const okpagesize = ref(10)
const nopagesize = ref(10)
const okpagenum = ref(1)
const nopagenum = ref(1)
const oktotal = ref(0)
const nototal = ref(0)
const oksalesname = ref('')
const nosalesname = ref('')
const okreceiptIds = ref([])
const noreceiptIds = ref([])
const okmonth = ref<any>('')
const nomonth = ref<any>('')
const okcompanyName = ref('')
const nocompanyName = ref('')
const okapplicationMonth = ref('')
const noapplicationMonth = ref('')
const oktype = ref('')
const notype = ref('')
const okopenDay = ref('')
const noopenDay = ref('')
const okcheckStatus = ref('')
const nocheckStatus = ref('')
const oktabledate = ref<any>([])
const notabledate = ref<any>([])
const changeokpagesize = (val: any) => {
    okpagesize.value = val
    okpagenum.value = 1
    getokallinvoicelist()
}
const changeokpagenum = (val: any) => {
    okpagenum.value = val
    getokallinvoicelist()
}
const changenopagesize = (val: any) => {
    nopagesize.value = val
    nopagenum.value = 1
    getnoallinvoicelist()
}
const changenopagenum = (val: any) => {
    nopagenum.value = val
    getnoallinvoicelist()
}
const clearok = () => {
    oksalesname.value = ''
    okreceiptIds.value = []
    okmonth.value = ''
    okcompanyName.value = ''
    okapplicationMonth.value = ''
    oktype.value = ''
    okopenDay.value = ''
    okcheckStatus.value = ''
    getokallinvoicelist()
}
const clearno = () => {
    nosalesname.value = ''
    noreceiptIds.value = []
    nomonth.value = ''
    nocompanyName.value = ''
    noapplicationMonth.value = ''
    notype.value = ''
    noopenDay.value = ''
    nocheckStatus.value = ''
    getnoallinvoicelist()
}
const back = () => {
    window.history.back()
}
</script>

<style lang="scss" scoped>
.innertabactive {
    color: #0256FF !important;
    font-weight: 700;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

.tabcontentbox {
    padding: 16px;
}

.innertabbox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .innertabitem {
        cursor: pointer;
        min-width: 90px;
        height: 41px;
        text-align: center;
        line-height: 41px;
        color: #A7AAB2;
        font-size: 14px;
        background-color: #EFEEF1;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        border-top: 1px solid #e3e0e8;
        border-right: 1px solid #e3e0e8;
    }
}

.formbox {
    background-color: #ffffff;
    border-top-right-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 8px;

    .formcontent {
        padding: 0 24px 16px;
        width: 100%;
        box-sizing: border-box;

        .formitem {
            margin-top: 16px;
            display: flex;
            align-items: center;

            .lable {
                min-width: 70px;
                font-size: 14px;
                color: #202536;
                margin-right: 8px;
                text-align: right;
            }
        }
    }

    .top {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 16px 8px;
        align-items: center;
        border-bottom: 1px solid #F4F4F7;

        .toptext {
            color: #3D3D3D;
            font-size: 14px;
        }

        .utils {
            display: flex;
            align-items: center;
        }

        .clear {
            cursor: pointer;
            margin-right: 20px;
            margin-left: 24px;
            color: #9497B1;
            font-size: 14px;

            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
                margin-bottom: -3px;
            }
        }
    }
}

.accounttable {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px;
    margin-top: 16px;
}

.tableborder {
    border: 1px solid #EAEAEF;
    border-bottom: none !important;
}

.paginationborder {
    border: 1px solid #EAEAEF;
    padding-bottom: 16px;
}

.orign {
    color: #FF7642;
}

.blue {
    color: #3E5FF5;
}

.pointer {
    cursor: pointer;
}

.mg-b-20 {
    margin-bottom: 20px;
}

.ecporterrdialoginnertit {
    width: 100%;
    box-sizing: border-box;
    background-color: #FFF1EC;
    padding: 10px 16px;
    color: #FF7642;
    font-size: 14px;
    margin-top: -20px;
    margin-bottom: 20px;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
